<template>
  <div v-loading="loading" :style="'height:' + height">
    <iframe
      :src="src"
      frameborder="no"
      style="width: 100%; height: 100%"
      scrolling="auto"
    ></iframe>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'

interface Props {
  src: string
}

const props = defineProps<Props>()

const height = ref(document.documentElement.clientHeight - 94.5 + 'px')
const loading = ref(true)

let resizeHandler: () => void

onMounted(() => {
  setTimeout(() => {
    loading.value = false
  }, 300)

  resizeHandler = () => {
    height.value = document.documentElement.clientHeight - 94.5 + 'px'
  }

  window.addEventListener('resize', resizeHandler)
})

onBeforeUnmount(() => {
  if (resizeHandler) {
    window.removeEventListener('resize', resizeHandler)
  }
})
</script>
